<template>
  <div>
    <h2>会员添加</h2>
    <table>
      <tbody>
        <tr>
          <td>图片</td>
          <td>
            <img
              :src="form.tuPian" style="display: ''; max-width: 100px; max-height: 100px"
            />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td>名称</td>
          <td>
            <input type="text" v-model="form.name" />
          </td>
        </tr>
     
        <tr>
          <td>用户名</td>
          <td>
            <input type="text" v-model="form.userName" />
          </td>
        </tr>
        <tr>
          <td>密码</td>
          <td>
            <input type="text" v-model="form.pwd" />
          </td>
        </tr>
        <tr>
          <td>会员等级</td>
          <td>
            <select v-model="form.huiYuanDj">
              <option>黄金会员</option>
              <option>白银会员</option>
              <option>钻石会员</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>生日</td>
          <td>
            <input type="date" v-model="form.shengre" />
          </td>
        </tr>
        <tr>
          <td>电话</td>
          <td>
            <input type="text" v-model="form.phone" />
          </td>
        </tr>
        <tr>
          <td>金额</td>
          <td>
            <input type="text" v-model="form.money" />
          </td>
        </tr>
        <tr>
          <td>时间</td>
          <td>
            <input type="date" v-model="form.date" />
          </td>
        </tr>
        <tr>
          <td>费用</td>
          <td>
            <input type="text" v-model="form.feiYong" />
          </td>
        </tr>
        <tr>
          <td>累计</td>
          <td>
            <input type="text" v-model="form.leiji" />
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td>
            <input type="text" v-model="form.beizhu" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();
const form = reactive({
  id: 0,
  tuPian: "",
  name: "",
  userName: "",
  pwd: "",
  huiYuanDj: "",
  shengre: "",
  phone: "",
  money: "",
  date: "",
  feiYong: "",
  leiji: "",
  beizhu: "",
});
const Add=()=>{
    if(!form.name){
        alert("名称不能为空")
        return;
    }

    axios.post("https://localhost:7046/api/Huiyuan/AddHui",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
        }
        else{
            alert("添加失败");
        }
    })

}

const Tupian=(e:any)=>{
  var formData=new FormData();
  var file=e.target.file[0];
  formData.append("file",file)
  
  axios.post("",formData).then(res=>{
    form.tuPian=res.data;
  }).catch(err=>{
    console.log(err)
  })
}


</script>

<style scoped></style>
